<template>
  <el-container>
    <el-main>
    <el-form ref="sysMenuForm" :model="form" :rules="rules" label-width="80px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <el-form-item label="菜单名称" prop="name">
        <el-col :span="12">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>
      <el-form-item  label="上级菜单">
        <el-col :span="12">
          <el-input v-model="menuName" suffix-icon="el-icon-search" @focus="dialogShow" />
        </el-col>
      </el-form-item>

      <el-form-item label="权限标识" prop="permission">
        <el-col :span="12">
          <el-input v-model="form.permission"/>
        </el-col>
      </el-form-item>
         <el-form-item label="商户类型" prop="">
          <el-col :span="12">
            <el-select v-model="form.mchType" placeholder="请选择类型" multiple>
              <el-option label="后台" value="0"  />
              <el-option label="餐饮" value="1" />
              <el-option label="酒店" value="2" />
              <el-option label="名厨" value="3" />
              <el-option label="餐车" value="4" />
            </el-select>
          </el-col>
        </el-form-item>

      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">详细信息</span>
      </div>
      <el-form-item  label="图标" prop="icon">
        <el-col :span="12">
          <el-input v-model="form.icon"/>
        </el-col>
      </el-form-item>
      <el-form-item label="链接" prop="url">
        <el-col :span="12">
          <el-input v-model="form.url"/>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="clicked" @click="updateSysMenu('sysMenuForm')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
      </el-form-item>
    </el-form>
      <menu-dialog ref="menuDialog" @confirm="dialogConfirm" />
    </el-main>
  </el-container>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import menuDialog from './components/MenuDialog'
  import { find,update } from '@/api/sysMenu'
  export default {
    name:'sysMenu-edit',
    filters: {

    },
    components: {
      menuDialog
    },
    data() {
      return {
        id: '',
        clicked: false, // 按钮防双击
        menuName: '',
        form: {
          mchType:'',
          id: '',
          name: '',
          parentId: '',
          url:'',
          menuType:'',
          icon:'',
          permission:''

        },
        rules: {
          name: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          menuType: [
            {required: true, message: '请选择类型', trigger: 'blur'}
          ],
          permission: [
            {required: true, message: '请输入权限标识', trigger: 'blur'}
          ],
           mchType:[
              {required: true, message: '请选择商户类型', trigger: 'blur'}
          ]
        }
      }
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='sysMenu-edit' && newVal.query.id!=this.id) {
          this.getData()
        }
      }
    },
    created() {
      const _this = this
      console.log(this.$route.query.id)
      this.getData()
    },
    methods: {
      getData(){
        this.id = this.$route.query.id
        const _this = this
        find(this.id).then(response => {
          console.log(response)
      
          let sysMenu = response.data.sysMenu;
          _this.menuName = sysMenu.menuName
          _this.form.parentId = sysMenu.parentId
          _this.form.id = sysMenu.id
          _this.form.name = sysMenu.name
          _this.form.url = sysMenu.url
          _this.form.icon = sysMenu.icon
          _this.form.permission = sysMenu.permission
          _this.form.menuType = sysMenu.menuType
           sysMenu.mchType= sysMenu.mchType.split('')
          _this.form.mchType = sysMenu.mchType
         
        }).catch(error => {
        })
      },
      dialogShow() {
        this.$refs.menuDialog.show(this.form.id)
      },
      dialogConfirm(val) {
        this.form.parentId = val.id
        this.menuName = val.name
      },
      updateSysMenu(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
              var number=''
            _this.form.mchType.forEach(item=>{
                  number+=item
            })
            _this.form.mchType=number
            update(_this.form).then(response => {
              console.log(response)
              _this.clicked = false
                EventBus.$emit('sysMenu-edit', response.data)
                _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                  _this.$router.push({
                    path: '/sysMenu/list'
                  })
                })// 关闭当前tab回到列表
            }).catch(error => {
              _this.clicked = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
